<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="协同部门" prop="dept_id">
            <!--            <el-input v-model.trim="form.dept_id" autocomplete="off"></el-input>-->
            <el-select class="main-select-tree" style="width: 100%;" ref="selectTree" v-model="form.deptName"
                       clearable>
              <el-option v-for="item in deptDatas" :key="item.id"
                         :label="item.name" :value="item.id" style="display: none;"/>
              <el-tree class="main-select-el-tree" ref="selecteltree" :data="deptDatas"
                       node-key="id"
                       @node-click="handleNodeClick"
                       highlight-current :props="defaultProps"
                       :current-node-key="form.dept_id"
                       :expand-on-click-node="expandOnClickNode" default-expand-all/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="反馈要求" prop="feedback_require">
            <el-input v-model.trim="form.feedback_require" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="当前状态" prop="username">
            <el-radio-group v-model="form.username">
              <el-radio label="启用"></el-radio>
              <el-radio label="关闭"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{ loading ? '确定中 ...' : '确 定' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {editDept} from "@/api/warningOrder";
import {getDeptList} from "@/api/dept";
export default {
  name: 'bumenEdit',
  data() {
    return {
      form: {
        id: '',
        dept_id: '',
        feedback_require: '',
        warning_order_id: '',
        deptName: '',
      },
      deptDatas: [],
      defaultProps: {
        children: 'children',
        name: 'name'
      },
      expandOnClickNode: true,
      rules: {
        dept_id: [{ required: true, trigger: 'blur', message: '请选择部门' },],
        feedback_require: [{ required: true, trigger: 'blur', message: '请输入反馈要求' },],
      },
      title: '',
      dialogFormVisible: false,
      loading: false,
      disabled: false,
    }
  },
  created() { },
  methods: {

    showDia(row) {
      this.loading = false
      this.disabled = false
      console.log(row);
      this.getDeptData();
      if (row.warning_order_id) {
        this.title = '添加'
        this.form.warning_order_id = row.warning_order_id;
      } else {
        this.title = '编辑'
        console.log(row);
        console.log(row.row);
        this.form = Object.assign({}, row.row)
        this.form.deptName = row.row.dept_name;
        console.log('this.form',this.form);

      }
      this.dialogFormVisible = true
    },
    handleChange(value) {
      let cityNames = []
      value.forEach((e) => {
        cityNames.push(CodeToText[e])
      })
      this.citys = cityNames.join('/')
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      if (this.loading) {
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true

          editDept(this.form).then((res) => {
            console.log('res',res);
            if(res.code == 0){
              this.$baseMessage("成功", 'success')
              this.$emit('fetch-data')
              // this.loading = false
              // this.disabled = false
              this.close()
            }else {
              this.loading = false
              this.disabled = false
              this.$baseMessage(res.msg, 'error')

            }
          });
          // this.timer = setTimeout(() => {
          //   setTimeout(() => {
          //     this.loading = false
          //     this.disabled = false
          //   }, 400)
          //   this.$baseMessage('修改成功', 'success')
          //   this.close()
          // }, 2000)
        } else {
          return false
        }
      })
    },

    //获取部门树
    getDeptData() {
      getDeptList().then((res) => {
        console.log("部门data：")
        console.log(res.data)
        this.deptDatas = res.data
      })
      // const {data} = await getDeptList()
      // console.log("部门data：")
      // console.log(data)
      // this.deptDatas = data;
    },
    handleNodeClick(node) {
      console.log(node.id)
      this.$set(this.form, "dept_id", node.id);
      this.$set(this.form, "deptName", node.name);
      // this.queryForm.dept_id = node.id;
      this.$refs.selectTree.blur();
    },
  },
}
</script>